<template>
  <div>
    <div class="list-head c-shadow">
      <h3>企业信息查询</h3>
      <div class="query-criteria">
        <span class="search-title">检索条件：</span>
        <ul class="criteria-wrap">
          <li v-for="item in paramLabels" :key="item.name">{{item.name}}：{{item.value}}
            <span @click="deleteSelf(item)">x</span></li>
        </ul>
        <div>
          <el-button type="primary" class="ent-search" icon="el-icon-search" @click="goList">检索</el-button>
          <router-link tag="a" :to="{name:'clibsearch'}" class="research">重新检索</router-link>
        </div>
      </div>
      <div class="query-criteria nums">
        为您找到家
        <span class="blue">{{pager.total || 0}}</span>
        符合条件的企业
      </div>
    </div>
    <div class="table-list c-shadow">
      <j-no-data :mode="'b'" msg="b" v-if="pager.total === 0"></j-no-data>
      <table v-else>
        <thead>
          <tr>
            <th style="width:46px;">序号</th>
            <th style="width:270px;">企业名称</th>
            <!-- <th style="width:190px;">统一社会信用代码/注册号</th> -->
            <th style="width:60px;">法人</th>
            <th style="width:100px;">注册时间</th>
            <th style="width:138px;">注册资本</th>
            <!-- <th style="width:185px;">经营范围</th> -->
            <th style="width:55px;">区域</th>
            <!-- <th style="width:68px;">注册地</th> -->
            <th style="width:180px;">登记状态</th>
            <!-- <th>监管状态</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in lists" :key="item.name">
            <td>{{index + 1}}</td>
            <td><router-link tag="a" :title="item.entName" :to="{name:'baseinfoa',query:{entname:item.entName}}">{{item.entName || '--'}}</router-link></td>
            <!-- <td>{{item.code}}</td> -->
            <td>{{item.legalPerson || '--'}}</td>
            <td>{{item.registerDate | dateFormat}}</td>
            <td>{{item.money | tofixed}}{{item.regMoneyCurrency}}</td>
            <!-- <td>{{item.fanwei}}</td> -->
            <td>{{item.province || '--'}}</td>
            <!-- <td>{{item.regist}}</td> -->
            <td>{{item.registerStatus || '--'}}</td>
            <!-- <td><span :class="{watch:!item.watch}">{{item.watch?'取消监管':'加入监管'}}</span></td> -->
          </tr>
        </tbody>
      </table>
    </div>
    <div class="clearFix paging-wrap">
        <el-pagination
          class="fr "
          @current-change="entchangePaging"
          :current-page.sync="pager.pageNum"
          :page-size.sync="pager.pageSize"
          layout="prev, pager, next, jumper"
          :total.sync="pager.total">
        </el-pagination>
      </div>
  </div>
</template>
<script>
import { jNoData } from '../../components'
import { enterprise as api } from '../../api'
export default {
  data() {
    return {
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      paramLabels: [],
      querys: {},
      querysMap: [
        { name: 'entName', label: '企业名称' },
        { name: 'legalPerson', label: '法人/股东' },
        { name: 'regMoneyStart', label: '注册资本(万元)大于' },
        { name: 'regMoneyEnd', label: '注册资本(万元)小于' },
        { name: 'registerDateStart', label: '注册时间开始' },
        { name: 'registerDateEnd', label: '注册时间结束' },
        { name: 'provinceID', label: '所属区域' },
        { name: 'GCID', label: '行业分类' },
        { name: 'domesticlistplate', label: '境内上市模块' }
      ],
      areas: [
        { sel: false, name: '北京', flag: 11 },
        { sel: false, name: '天津', flag: 12 },
        { sel: false, name: '河北', flag: 13 },
        { sel: false, name: '山西', flag: 14 },
        { sel: false, name: '内蒙古', flag: 15 },
        { sel: false, name: '辽宁', flag: 21 },
        { sel: false, name: '吉林', flag: 22 },
        { sel: false, name: '黑龙江', flag: 23 },
        { sel: false, name: '上海', flag: 31 },
        { sel: false, name: '江苏', flag: 32 },
        { sel: false, name: '浙江', flag: 33 },
        { sel: false, name: '安徽', flag: 34 },
        { sel: false, name: '福建', flag: 35 },
        { sel: false, name: '江西', flag: 36 },
        { sel: false, name: '山东', flag: 37 },
        { sel: false, name: '河南', flag: 41 },
        { sel: false, name: '湖北', flag: 42 },
        { sel: false, name: '湖南', flag: 43 },
        { sel: false, name: '广东', flag: 44 },
        { sel: false, name: '广西', flag: 45 },
        { sel: false, name: '海南', flag: 46 },
        { sel: false, name: '重庆', flag: 50 },
        { sel: false, name: '四川', flag: 51 },
        { sel: false, name: '贵州', flag: 52 },
        { sel: false, name: '云南', flag: 53 },
        { sel: false, name: '西藏', flag: 54 },
        { sel: false, name: '陕西', flag: 61 },
        { sel: false, name: '甘肃', flag: 62 },
        { sel: false, name: '青海', flag: 63 },
        { sel: false, name: '宁夏', flag: 64 },
        { sel: false, name: '新疆', flag: 65 },
        { sel: false, name: '台湾', flag: 71 },
        { sel: false, name: '香港', flag: 81 },
        { sel: false, name: '澳门', flag: 82 }
      ],
      industrys: [
        { sel: false, name: '农、林、牧、渔业', flag: 'A' },
        { sel: false, name: '采矿业', flag: 'B' },
        { sel: false, name: '制造业', flag: 'C' },
        { sel: false, name: '电力、燃气及水的生产和供应业', flag: 'D' },
        { sel: false, name: '建筑业', flag: 'E' },
        { sel: false, name: '交通运输、仓储和邮政业', flag: 'F' },
        { sel: false, name: '批发和零售业', flag: 'H' },
        { sel: false, name: '住宿和餐饮业', flag: 'I' },
        { sel: false, name: '金融业', flag: 'J' },
        { sel: false, name: '房地产业', flag: 'K' },
        { sel: false, name: '租赁和商务服务业', flag: 'L' },
        { sel: false, name: '科学研究、技术服务和地质勘查业', flag: 'M' },
        { sel: false, name: '水利、环境和公共设施管理业', flag: 'N' },
        { sel: false, name: '居民服务和其他服务业', flag: 'O' },
        { sel: false, name: '教育', flag: 'P' },
        { sel: false, name: '卫生、社会保障和社会福利业', flag: 'Q' },
        { sel: false, name: '文化、体育和娱乐业', flag: 'R' }
      ],
      lists: []
    }
  },
  methods: {
    entchangePaging(index) {
      this.pager.pageNum = index
      this.getList()
    },
    goList() {
      this.getList()
    },
    deleteSelf(param) {
      this.paramLabels.splice(this.paramLabels.indexOf(param), 1)
      let key = this.querysMap.find(item => item.label === param.name).name
      delete this.querys[key]
      this.getList()
    },
    getList() {
      let params = {
        pageSize: this.pager.pageSize,
        pageIndex: this.pager.pageNum
      }
      params = Object.assign(params, this.querys)
      // console.log(params)
      api.getEnterList(params).then(rtn => {
        // console.log(rtn.data.list)
        this.lists = rtn.data.list
        this.pager.total = rtn.data.total*1
      }).catch(err => {
        console.log(err)
        this.lists = []
        this.pager.total = 0
      })
    },
    generateLabel(querys) {
      this.querys = querys
      this.paramLabels = []
      for (let key in querys) {
        let obj = {}
        obj.name = this.querysMap.find(item => item.name === key).label
        switch (key) {
          case 'provinceID':
            obj.value = this.areas
              .filter(item => querys[key].indexOf(item.flag) > -1)
              .map(item => item.name)
              .join(',')
            break
          case 'GCID':
            obj.value = this.industrys
              .filter(item => querys[key].indexOf(item.flag) > -1)
              .map(item => item.name)
              .join(',')
            break
          default:
            obj.value = querys[key]
        }
        this.paramLabels.push(obj)
      }
    }
  },
  mounted() {
    this.generateLabel(this.$route.query)
    this.getList()
  },
  components:{
    jNoData
  }
}
</script>
<style lang="scss" scoped>
.list-head {
  padding: 0 20px;
  margin: 20px 0;
  h3 {
    line-height: 82px;
    font-size: 24px;
    color: #6a6a6a;
    text-align: center;
    border-bottom: 1px solid #dadada;
  }
  .query-criteria {
    line-height: 62px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    .search-title {
      color: #999999;
      margin-right: 20px;
    }
    .criteria-wrap {
      display: flex;
      flex-wrap: wrap;
      height: 40px;
      flex: 1;
      overflow-y: auto;
      // padding-top: 6px;
      li {
        position: relative;
        padding: 5px 15px;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #24a5ff;
        background: #e2f1ff;
        color: #24a5ff;
        margin-right: 20px;
        margin-top: 10px;
        height: 28px;
        line-height: 1;
        span {
          position: absolute;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          box-sizing: border-box;
          border: 1px solid #24a5ff;
          color: #24a5ff;
          background: #e2f1ff;
          top: -6px;
          right: -6px;
          line-height: 8px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .ent-search {
      width: 120px;
    }
    .research {
      color: #24a5ff;
      margin-left: 10px;
    }
  }
  .nums {
    color: #6a6a6a;
    .blue {
      color: #24a5ff;
      font-weight: bold;
      margin: 0 10px;
    }
  }
}
.table-list {
  padding: 40px;
  margin-bottom: 20px;
  table {
    width: 100%;
    border: 1px solid #c7e0f7;
    border-collapse: collapse;
    th {
      background: #e9f3ff;
      text-align: center;
    }
    tbody {
      tr:nth-of-type(odd) {
        background: #f3f8ff;
      }
      tr:hover {
        // border-top: 1px solid #e8e6d1;
        // border-bottom: 1px solid #e8e6d1;
        background: #fffaeb;
      }
    }
    tr {
      line-height: 40px;
    }

    td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        background: #f9f9f9;
        border: 1px solid #dddddd;
        padding: 5px 10px;
        border-radius: 5px;
        &.watch {
          background: #d2ffe5;
          border: 1px solid #5ce695;
          color: #22c45f;
        }
      }
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/clib/list.vue